<template>
  <div class="ad_content5Edit">
    <div class="title_h1">{{ isEdit ? "编辑业绩详情" : "新增业绩详情" }}</div>
    <div class="ad_c5_body">
      <div class="hang_msg">
        <div class="left_title">标题 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.title"
          placeholder="请输入标题"
          size="small"
        ></el-input>
      </div>
      <div class="hang_msg">
        <div class="left_title">摘要 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.desc"
          placeholder="请输入摘要"
          size="small"
        ></el-input>
      </div>
      <div class="hang_msg">
        <div class="left_title">来源 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.author"
          placeholder="请输入来源"
          size="small"
        ></el-input>
      </div>
      <div class="hang_msg">
        <div class="left_title">排序 :</div>
        <el-input
          class="right_input"
          v-model="itemInfo.sort"
          placeholder="请输入排序"
          size="small"
          type="number"
        ></el-input>
      </div>
      <div class="hang_msg">
        <div class="left_title">是否显示 :</div>
        <el-switch
          v-model="itemInfo.isshow == 1? true : false"
          active-text="显示"
          inactive-text="不显示"
          @change="switchChange"
        >
        </el-switch>
      </div>
      <div class="hang_msg dantupian_up">
        <div class="left_title top_cc">封面图 :</div>
        <el-upload
          :action="http+'/api/common/fileupload'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="fileChange"
          :file-list="fileList"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
      <div class="hang_msg dantupian_up">
        <div class="left_title top_cc">内容图 :</div>
        <el-upload
          :action="http+'/api/common/fileupload'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreviewC"
          :on-remove="handleRemoveC"
          :on-success="fileChangeC"
          :file-list="fileListEl"
          :limit="3"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div class="hang_msg dantupian_up">
        <div class="left_title top_cc">文件 :</div>
        <el-upload
          :action="http+'/api/common/fileupload'"
          list-type="text"
          :on-preview="handlePictureCardPreviewCF"
          :on-remove="handleRemoveCF"
          :on-success="fileChangeCF"
          :file-list="fileListElCF"
          :limit="5"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">请上传文件</div>
        </el-upload>
      </div>
      <div class="left_title_bgcc">内容</div>

      <WenbenCom @getContent="getContent" :rfuwenben="rfuwenben"></WenbenCom>
    </div>
    <el-button @click="subData" type="warning" class="sub_btn">提交</el-button>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import WenbenCom from "@components/wenbenCom";
import _ from "@/until/lodash";
export default {
  components: { WenbenCom },
  data() {
    return {
      vv: "",
      itemInfo: {
        title: "",
        desc: "",
        author: "",
        sort: "",
        isshow: 1,
        time: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      isEdit: false,
      fuwenben: "",
      rfuwenben: "",
      dataList: [],
      id: "",
      fileList: [],
      disabled: false,
      fileListEl:[],
      fileListC:[],
      fileListElCF:[],
      fileListCF:[],
      http:""
    };
  },
  mounted() {
    this.http = this.$apiUrl;
    console.log("1212")
    if (this.$route.query.info) {
      this.isEdit = true;
      this.id = this.$route.query.info;
      // this.itemInfo = JSON.parse(this.$route.query.info);
      this.$getApi("/common/qiyeyejizsxq", { id: this.id }).then((res) => {
        console.log(res);
        this.itemInfo = res.data;
        this.fileList = [
          { name: "ddd.jpeg", url: this.http + res.data.thumbnail },
        ];
        let imgs = JSON.parse(res.data.images)
        _.map(imgs,(itemImg)=>{
          let name = itemImg.split("/")
          let nameLength = name.length;
          this.fileListEl.push( { name: name[nameLength-1], url: this.http + itemImg },)
        })
        this.fileListC = imgs;
        console.log(this.fileListEl)
        let files = JSON.parse(res.data.file)
        _.map(files,(itemImg)=>{
          let name = itemImg.split("/")
          let nameLength = name.length;
          this.fileListElCF.push( { name: name[nameLength-1], url: this.http + itemImg },)
        })
        this.fileListCF = files;
        this.rfuwenben = this.itemInfo.content;
        this.firstImg = res.data.thumbnail
        // this.dialogImageUrl = res.data.thumbnail;
      });
    }
  },
  computed: {
    itemInfoIsShow() {
      return this.itemInfo.isshow == 1 ? true : false;
    },
  },
  methods: {
    fileChanges(el){
      console.log(el[0].files)
    },
    switchChange(el){
      console.log(el)
      if(el){
        this.itemInfo.isshow = 1
      }else{
        this.itemInfo.isshow = 0
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleRemoveC(file) {
      console.log(file);
      let indexC = _.findIndex(this.fileListEl, item=>{
        return item.name == file.name
      });
      console.log(indexC)
      this.fileListC.splice(indexC,1)
      this.fileListEl.splice(indexC,1)
      console.log(this.fileListC)
    },
    handleRemoveCF(file) {
      let indexC = _.findIndex(this.fileListElCF, item=>{
        return item.name == file.name
      });
      console.log(indexC)
      this.fileListCF.splice(indexC,1)
      this.fileListElCF.splice(indexC,1)
      console.log(this.fileListCF)
    },
    fileChange(response, file, fileList) {
      console.log(response, file, fileList);
      this.dialogImageUrl = response.data;
    },
    fileChangeC(response, file, fileList) {
      this.fileListC.push(response.data)
      this.fileListEl = fileList;
      console.log(response, file, fileList);
    },
    fileChangeCF(response, file, fileList) {
      this.fileListCF.push(response.data)
      this.fileListElCF = fileList;
      console.log(response, file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    
    handlePictureCardPreviewC(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreviewCF(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownloadC(file) {
      console.log(file);
    },
    handleDownloadCF(file) {
      console.log(file);
    },
    subData() {
      console.log()
      
      let dataL = {
        title: this.itemInfo.title,
        desc: this.itemInfo.desc,
        author: this.itemInfo.author,
        sort: this.itemInfo.sort,
        isshow: this.itemInfo.isshow,
        thumbnail: this.dialogImageUrl,
        content: this.fuwenben,
        images:JSON.stringify(this.fileListC),
        file:JSON.stringify(this.fileListCF)
      };
      if (this.id) {
        dataL.id = Number(this.id);
        this.$postApi("/common/editqiyedongtai", dataL).then((res) => {
          console.log(res);
          Message({
            type: "success",
            message: "编辑成功",
            showClose: true,
          });
          this.$router.go(-1)
          // this.dataList = res.data;
        });
      } else {
        console.log(dataL);
        this.$postApi("/common/addqiyedongtai", dataL).then((res) => {
          console.log(res);
          Message({
            type: "success",
            message: "新增成功",
            showClose: true,
          });
          this.$router.go(-1)
          // this.dataList = res.data;
        });
      }
    },
    getContent(val) {
      this.fuwenben = val;
    },
  },
};
</script>
<style lang="stylus">
.dantupian_up {
  .el-upload-list--picture-card .el-upload-list__item{
    width 160px
    height 110px
  }
  .el-upload--picture-card{
    width 160px
    height 110px
  }
  .el-upload-list__item-actions{
    width 160px
    height 110px
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style scoped lang="stylus">
.picture-card {
}

.ad_content5Edit {
  background-color: #fff;
  padding-bottom: 30px;

  .left_title_bgcc {
    background-color: #85bcfa;
    color: #fff;
    text-align: center;
    padding: 6px 0;
    width: 100%;
    margin: 10px 0;
  }

  .hang_msg {
    display: flex;
    align-items: center;
    padding: 20px 0 10px 0;
    font-size: 16px;
    &.dantupian_up{
      align-items :flex-start
    }
    .left_title {
      width: 160px;
      text-align: right;
      padding-right: 8px;
      color: #004173;

      &.top_cc {
        display: flex;
        justify-content: flex-end;
        vertical-align: top;
        
      }
    }

    .right_input {
      width: 460px;
    }
  }

  .sub_btn {
    display: block;
    width: 300px;
    margin: 30px auto 20px;
  }

  .title_h1 {
    // text-align center;
    color: #004173;
    font-size: 26px;
    padding: 20px 0 10px 60px;
    border-bottom: 1px solid #f0f0f0;
  }

  .ad_c5_body {
    padding: 10px;
  }
}
</style>
